先前提到我們可以使用 v-bind
來動態綁定會變化的元素屬性,比如用 :class = "{'套用類別名稱':判斷值}"
,以物件方式加入類別樣式,在這裡我們有另一種寫法,就是直接將 class
裡面所存放的物件,直接存放在 Vue 資料中,像是下面範例的 classObject
,這樣的好處是可直接透過物件的方式來修改類別樣式的判斷式,而不用在另外用資料來存判斷式的值,像是 isColorRed
或 isTextBold
就可以省掉。我們用 v-on
在 button
加上 click 事件
,觸發之後可以變更判斷式的值,用!
否定語法,將 true
變成 false
,或 false
變成 true
來套用樣式,要注意第二種寫法,如果我們要存取物件時,如果遇到物件內的存取名稱是用-符號
連接,我們要改成用['存取名稱']
才不會顯示錯誤,像是 text-bold
。
<body>
<div id=app>
<p :class="{'color':isColorRed,'text-bold':isTextBold}">物件寫法1</p>
<button @click="isColorRed=!isColorRed">變紅</button>
<button @click="isTextBold=!isTextBold">變粗</button>
<p :class="classObject">物件寫法2</p>
<button @click="classObject.color=!classObject.color">變紅</button>
<button @click="classObject['text-bold']=!classObject['text-bold']">變粗</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
isColorRed:true,
isTextBold:true,
classObject:{
'color':true,
'text-bold':true
}
}
})
</script>
.color{
color:red;
}
.text-bold{
font-weight: bold;
}
使用物件加入類別的方式,我們已經知道類別的數量一個一個去設定類別的值,如果我們今天不能判斷有多少類別樣式要套用,就得採用陣列的方式 : class = ['類別名稱','類別名稱']
來加入類別樣式,加上前面提到,我們可以用 v-model
將一個陣列資料和 checkbox
輸入綁定,當我們點擊 checkbox
點擊欄位,所設定的 value
就會加入陣列資料中,而我們將類別樣式設定成value
,當點擊後 classArray
陣列就會加入此值並且套用此類別樣式。
<body>
<div id=app>
<p :class="['color','text-bold']">陣列寫法1</p>
<p :class="classArray">陣列寫法2</p>
<input type="checkbox" value="color" v-model="classArray"></input>
<input type="checkbox" value="text-bold" v-model="classArray"></input>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
classArray:[]
}
})
</script>
.color{
color:red;
}
.text-bold{
font-weight: bold;
}
我們也可以直接插入 style
樣式屬性,而不使用類別樣式,插入樣式屬性的方式 :style = { 樣式屬性:"樣式的值"}
,然後也可以分為物件還有陣列的方式。最後提醒如果我們要使用到的屬性或變數,比如 font-weight
中間有 dash - 符號
的名稱,我們如果直接使用它會出錯,必須使用 ' '
將名稱包起來,或者是將它改寫成 camelCased (駝峰) 命名
,將 dash
刪除並且將 dash
後面變大寫,比如像是 fontWeight
。
<body>
<div id=app>
<h2>行內樣式</h2>
<p style="font-weight:bold;color:red;">一般插入行內樣式方法</p>
<p :style="{fontWeight:'bold',color:'red'}">物件插入行內樣式方法 1</p>
<p :style="classObjects">物件插入行內樣式方法 2</p>
<p :style="[{fontWeight:'bold'},{color:'red'}]">陣列插入行內樣式方法 1</p>
<p :style="[color,font]">陣列插入行內樣式方法 2</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
classObjects:{
fontWeight:'bold',
color:'red'
},
font:{
fontWeight:'bold'
//改成 'font-weight':'bold'也可以
},
color:{
color:'red'
}
}
})
</script>
有些瀏覽器需要加上前綴字(Prefix)
,使新的 css 語法能在不同排版的瀏覽器中正確顯示。可以透過 Can I use 這個服務來查詢哪些 css 語法,在哪些瀏覽器中需要加上前綴字 Prefix
。而如果我使用 Vue 的話,Vue 會自動幫我們幫語法的前綴字補上。